<template>
  <el-row class="header" type="flex" justify="space-between" align="middle">
    <el-col :span="12" style="text-align: right">
      <span>欢迎来到家政服务平台</span>
    </el-col>
    <el-col :span="12" style="text-align: right;">
      <el-form inline="inline">
        <el-form-item>
          <el-button-group v-if="!isLoggedIn" >
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="primary" @click="register">注册</el-button>
          </el-button-group>
          <el-dropdown trigger="click" v-else style="margin-right: 20px;">
            <el-button>
              {{custInfo.username}}
              <el-icon><arrow-down/></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/custInfo')">个人空间</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <el-card style="width:100%;height: 100%;margin-top:5px;">
    <el-row>
      <el-col :span="4" style="width: 100% ;height: 90vh">
        <el-menu mode="vertical" style="border: whitesmoke solid 1px;" @select="selectMenu" >
          <el-menu-item index="1">我的信息</el-menu-item>
          <el-menu-item index="2">我的订单</el-menu-item>
          <el-menu-item index="3">我的优惠券</el-menu-item>
          <el-menu-item index="4">评价管理</el-menu-item>
          <el-menu-item index="5">会话管理</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" style="width: 100% ;height: 90vh">
        <el-card v-if="x==1"  style="width: 100% ;height: 100%">
          <el-form label-width="100px" label-position="left">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="用户名">
                  <span>{{custInfo.username}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄">
                  <span>{{custInfo.age}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="性别">
                  <span>{{custInfo.gender==null ? "暂无" : custInfo.gender==1 ? "男" : "女"}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话">
                  <span>{{custInfo.phone}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="邮箱">
                  <span>{{custInfo.email}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址">
                  <span>{{custInfo.address}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <el-button type="primary" @click="editeCustInfo">修改个人信息</el-button>
          </template>
        </el-card>

        <el-dialog title="修改个人信息" v-model="custVisible">
          <el-form label-width="80px" label-position="left">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="用户名">
                  <el-input v-model="editeInfo.username" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄">
                  <el-input v-model="editeInfo.age" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-select v-model="editeInfo.gender" placeholder="请选择">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话">
                  <el-input v-model="editeInfo.phone" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="邮箱">
                  <el-input v-model="editeInfo.email" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址">
                  <el-input v-model="editeInfo.address" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <el-button type="primary" @click="saveInfo">保存</el-button>
          </template>
        </el-dialog>

        <el-main v-if="x==2" style="height: 90vh;padding: 0;overflow: hidden ">
            <iframe src="http://localhost:7474/custOrder" frameborder="0" scrolling="auto-y" width="100%" height="100%"></iframe>
         </el-main>
        <el-main v-if="x==5" style="height: 90vh;padding: 0;overflow: hidden ">
          <iframe src="http://localhost:7474/custSession" frameborder="0" scrolling="auto-y" width="100%" height="100%"></iframe>
        </el-main>

        <el-card v-if="x==3"  style="width: 100% ;height: 100%">
          <el-card v-for="item in custCoupons" :key="item.id" style="border: yellowgreen solid 2px;border-radius: 10px">
            <el-row style="margin: 5px;">
              <el-col :span="24">
                优惠券名称：{{item.name}}
              </el-col>
            </el-row>
            <el-row style="margin: 5px;">
              <el-col :span="12">
                优惠券类型：{{formatterCouponType(item.type)}}
              </el-col>
              <el-col :span="12">
                优惠券效果：{{item.effect}}
              </el-col>
            </el-row>
            <el-row style="margin: 5px;">
              <el-col :span="12">
                优惠券有效期：{{item.validityPeriod}}
              </el-col>
            </el-row>
          </el-card>
        </el-card>
        <div v-if="x==4" style="width: 100% ;height: 100%;">
          <el-dialog :title="dialogTitle" v-model="dialogVisible"
                     :close-on-click-modal="false" style="width:800px;padding:40px;">
            <el-form label-position="top" label-width="80px">
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item label="评价">
                    <el-input v-model="editForm.evaluate" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <template #footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button @click="saveFeedback" type="primary">保存</el-button>
            </template>
          </el-dialog>
            <el-row v-for="item in feedbackArrays" :key="item.id" style="border: #1989fa solid 2px;border-radius: 10px;">
              <el-col :span="24">
                <el-card>
                  <el-row>
                    <el-col :span="6">
                      评价时间：{{item.createTime}}
                    </el-col>
                    <el-col :span="6">
                      点赞数：{{item.likes}}
                    </el-col>
                    <el-col :span="6">
                      评价星级：{{item.starRating}}
                    </el-col>
                    <el-col :span="6">
                      <el-button type="warning" @click="updateFeedback(item)">修改</el-button>
                      <el-button type="danger" @click="deleteFeedback(item.id)">删除</el-button>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      评价内容：{{item.evaluate}}
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      反馈内容：{{item.feedback}}
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </div>
      </el-col>
    </el-row>
  </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import * as row from "date-fns/locale";
import {ArrowDown} from "@element-plus/icons-vue";
import router from "@/router";

const x=ref()
const dialogTitle=ref()
const dialogVisible=ref()
const custCoupons=ref([])
const showCoupons = async () => {
  await axios.post(BASE_URL+'/v1/customer/select',{id:custInfo.value.id})
      .then((response)=>{
        if (response.data.code==2000){
          custInfo.value=response.data.data[0]
        }else {
          ElMessage.error(response.data.msg)
        }
      })
  if (custInfo.value.coupon!=null){
    for (let i=0;i<custInfo.value.coupon.length;i++){
      axios.post(BASE_URL+'/v1/coupon/select',{id:custInfo.value.coupon[i]})
          .then((response)=>{
            if (response.data.code==2000){
              custCoupons.value.push(response.data.data[0])
            }else {
              ElMessage.error(response.data.msg)
            }
          })
    }
  }
}
const custVisible=ref(false)
const editeInfo=ref({})
const editeCustInfo = () => {
  custVisible.value = true
  editeInfo.value=custInfo.value
}
const saveInfo = () => {
  if (confirm("确定修改个人信息吗")){
    axios.post(BASE_URL+'/v1/customer/save',editeInfo.value)
        .then((response)=>{
          if (response.data.code==2000){
            getCust(custInfo)
            ElMessage.success("修改成功")
            custVisible.value=false
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const isLoggedIn = ref(false);
const login = () => {
  router.push({path: '/custLogin'});
};
const register = () => {
  router.push({path: '/custLogin'});
};
const logout = () => {
  isLoggedIn.value = false;
  axios.get(BASE_URL+'/v1/customer/logout')
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("退出登录")
          router.push({path: '/custLogin'})
        }else {
          ElMessage.error(response.data.msg)
        }
      })

};
const couponTypeArr=ref([])
onMounted(async ()=>{
  await getCust(custInfo)
  if(Object.keys(custInfo.value).length==0){
    isLoggedIn.value=false
    router.push('/custLogin')
  }else {
    isLoggedIn.value=true
  }
  await loadDictOptions(couponTypeArr,"CouponType")
})
const formatterCouponType = (type) => {
  if (!couponTypeArr.value){
    return type;
  }
  for (let t of couponTypeArr.value){
    if (type==t.value){
      type=t.label
    }
  }
  return type
}
const handleClose= () => {
  if(confirm("确定关闭弹窗吗")){
    dialogVisible.value=false
  }
}
const selectMenu = (index) => {
  x.value=index
  if (index==3){
    custCoupons.value=[]
    showCoupons()
  }
  if(index==4){
    feedbackArrays.value=[]
    loadFeedback()
  }
}
const custInfo=ref({})

const orderArrays=ref([])
const feedbackArrays=ref([])
const loadFeedback = async () => {
  await axios.post(BASE_URL+'/v1/order/select',{custId:custInfo.value.id})
      .then((response)=>{
        if (response.data.code==2000){
          orderArrays.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
  for(let i=0;i<orderArrays.value.length;i++){
    await axios.post(BASE_URL+'/v1/feedback/select',{orderId:orderArrays.value[i].id})
        .then((response)=>{
          if (response.data.code==2000){
            feedbackArrays.value=response.data.data.list
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const editForm=ref({})
const updateFeedback = (row) => {
  console.log(row)
  editForm.value=row
  dialogVisible.value=true
  console.log(editForm.value)
}
const saveFeedback = () => {
  axios.post(BASE_URL+'/v1/feedback/update',editForm.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('保存成功')
          dialogVisible.value=false
          loadFeedback()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const deleteFeedback = (id) => {
  console.log(id)
  if (confirm("确认删除该记录吗")) {
    axios.delete(BASE_URL + '/v1/feedback/delete/' + id)
        .then((response) => {
          if (response.data.code == 2000) {
            ElMessage.success('删除成功')
            loadFeedback()
          } else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
</script>

<style scoped>
.header {
  background-color: #409eff;
  color: white;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>